<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/home.css">
</head>
<!--项目管理工具，码云gitee，国外的工具git-->
<body>
<!--新建三个div，分别为头部，中间，底部-->
<div class="top">
    <!--    公司logo-->
    <div class="top-logo">
        <div class="float-left"><img src="../img/logo_g0yv.jpg" height="141" width="204"/></div>
        <div class="float-right top-logo-phone-div">
            <div class="float-left"><img src="../img/icon2_03_uc2a.png" height="30" width="30"/></div>
            <div class="float-right top-logo-phone">028-8888888</div>
        </div>
    </div>
    <!--    导航条-->
    <div class="top-nav">
        <!--        无序标签-->
        <ul>
            <a href="#">
                <li>首页</li>
            </a>
            <a href="#">
                <li>公司信息</li>
            </a>
            <a href="#">
                <li>新闻动态</li>
            </a>
            <a href="#">
                <li>产品展示</li>
            </a>
            <a href="#">
                <li>联系我们</li>
            </a>
            <a href="#">
                <li>在线留言</li>
            </a>
        </ul>
    </div>
    <!--    广告-->
    <div class="top-ad">
        <p>品味生活·品位美食</p>
        <p>一壶茶 沏出了生活的醇美</p>
        <p>一枝花 开出了生活的鲜艳</p>
        <p> 一首诗 吟出了生活的酸辛</p>
        <p> 一把火 燃烧出了生活的激情</p>
        <p> 一枝笔 绘出了人生的五彩缤纷</p>
        <p> 一首歌唱出了人生的喜怒哀惧</p>
        <p> 生活像五味瓶，这么酸、这么甜、这么苦、又这么辣</p>
        <p>
            <!--            span行内元素，不会自动换行-->
            <span>品味</span>
            <span>生活</span>
            &nbsp;&nbsp;
            <span>品味</span>
            <span>美食</span>
            <br>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;星语餐饮给你生活指南</span>
        </p>

    </div>
</div>
<!--首页中间内容-->
<div class="middle">
    <div class="middle-content">
        <div class="middle-content-left float-left">
            <div class="middle-content-left-title">教新动态</div>
            <div class="middle-content-left-content">
                <div class="float-left"><img src="../img/m331.jpg" height="190" width="268"/></div>
                <div class="float-right">
                    <div>
                        <h5>日本较大抹茶餐饮七叶和茶登陆上海</h5>
                        <p>日本较大的抹茶督饮连锁正式登陆上海，其中</p>
                    </div>
                    <div>
                        <h5>日本较大抹茶餐饮七叶和茶登陆上海</h5>
                        <p>日本较大的抹茶督饮连锁正式登陆上海，其中</p>
                    </div>
                    <div>
                        <h5>日本较大抹茶餐饮七叶和茶登陆上海</h5>
                        <p>日本较大的抹茶督饮连锁正式登陆上海，其中</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="middle-content-right float-right">
            <div class="middle-content-left-title">产品展示</div>
            <div class="middle-content-right-content">
                <div class="float-left">
                    <div><img src="../img/48_j53b.jpg"/></div>
                    <div>
                        <h5>蚂蚁上树</h5>
                        <p>粉丝200g，猪肉馅50g</p>
                    </div>
                </div>
                <div class="float-right">
                    <div><img src="../img/48_j53b.jpg"/></div>
                    <div>
                        <h5>蚂蚁上树</h5>
                        <p>粉丝200g，猪肉馅50g</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--首页底部内容-->
<div class="foot">
    <!--    直线 hr 直线是一个特殊的div  高度为0-->
    <hr>
    <div class="foot-content">
    <div>网址: admin.com</div>
    <div>邮箱:admin@ 163.com联系电话: 028-80000000(座机)</div>
    <div>联系地址:四川省成都市孵化园</div>
    <div>Copyright◎2009-201 1,www.xxxxxx.com, All rights reserved</div>
    </div>
</div>

</body>
</html>